<template>
	<view class="profile-container">
		<!-- 顶部标题栏 -->
		<view class="header" :style="{ paddingTop: safeDistance + 'px' }">
			<view class="header-content">
				<text class="header-title">我的</text>
			</view>
		</view>

		<!-- 用户信息卡片 -->
		<view class="user-card">
			<view class="user-avatar-wrapper">
				<image 
					class="user-avatar" 
					src="/static/default-avatar.png" 
					mode="aspectFill"
				/>
				<view class="edit-button" @click="handleEditProfile">
					<text class="edit-icon">✏️</text>
				</view>
			</view>
			<text class="user-name">觉醒者</text>
			<text class="user-id">ID: 2024001</text>
		</view>

		<!-- 功能列表 -->
		<scroll-view class="profile-scroll" scroll-y>
			<view class="menu-list">
				<!-- 我的收藏 -->
				<view class="menu-item" @click="handleMyCollection">
					<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
						<text class="menu-icon">⭐</text>
					</view>
					<text class="menu-text">我的收藏</text>
					<text class="menu-badge">12</text>
					<text class="menu-arrow">→</text>
				</view>

				<!-- 我的关注 -->
				<view class="menu-item" @click="handleMyFollow">
					<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
						<text class="menu-icon">👥</text>
					</view>
					<text class="menu-text">我的关注</text>
					<text class="menu-badge">8</text>
					<text class="menu-arrow">→</text>
				</view>

				<!-- 觉醒记录 -->
				<view class="menu-item" @click="handleAwakeningRecord">
					<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
						<text class="menu-icon">📝</text>
					</view>
					<text class="menu-text">觉醒记录</text>
					<text class="menu-arrow">→</text>
				</view>

				<!-- 设置 -->
				<view class="menu-item" @click="handleSettings">
					<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #64748b 0%, #475569 100%);">
						<text class="menu-icon">⚙️</text>
					</view>
					<text class="menu-text">设置</text>
					<text class="menu-arrow">→</text>
				</view>

				<!-- 关于 -->
				<view class="menu-item" @click="handleAbout">
					<view class="menu-icon-wrapper" style="background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);">
						<text class="menu-icon">ℹ️</text>
					</view>
					<text class="menu-text">关于</text>
					<text class="menu-arrow">→</text>
				</view>
			</view>

			<!-- 底部占位 -->
			<view class="bottom-placeholder"></view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';

	// 安全距离（顶部内边距 = 安全区域 + 基础间距）
	const safeDistance = computed(() => {
		const systemInfo = uni.getSystemInfoSync();
		const safeAreaTop = systemInfo.safeAreaInsets?.top || 0;
		return safeAreaTop + 20;
	});

	// 编辑资料
	const handleEditProfile = () => {
		uni.showToast({
			title: '编辑资料功能开发中',
			icon: 'none'
		});
	};

	// 我的收藏
	const handleMyCollection = () => {
		uni.showToast({
			title: '我的收藏功能开发中',
			icon: 'none'
		});
	};

	// 我的关注
	const handleMyFollow = () => {
		uni.showToast({
			title: '我的关注功能开发中',
			icon: 'none'
		});
	};

	// 觉醒记录
	const handleAwakeningRecord = () => {
		uni.showToast({
			title: '觉醒记录功能开发中',
			icon: 'none'
		});
	};

	// 设置
	const handleSettings = () => {
		uni.showToast({
			title: '设置功能开发中',
			icon: 'none'
		});
	};

	// 关于
	const handleAbout = () => {
		uni.showToast({
			title: '关于功能开发中',
			icon: 'none'
		});
	};
</script>

<style lang="scss" scoped>
	.profile-container {
		height: 100vh;
		background: linear-gradient(180deg, #f5f7fa 0%, #e9ecef 100%);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	/**
	 * 顶部标题栏
	 */
	.header {
		flex-shrink: 0;
		width: 100%;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-bottom: 32rpx;
		background: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		box-sizing: border-box;
	}

	.header-content {
		flex: 1;
	}

	.header-title {
		font-size: 48rpx;
		font-weight: 900;
		color: #1a202c;
		display: block;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
	}

	/**
	 * 用户信息卡片
	 */
	.user-card {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 60rpx 32rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 24rpx;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
		position: relative;
	}

	.user-avatar-wrapper {
		position: relative;
		margin-bottom: 24rpx;
	}

	.user-avatar {
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		border: 6rpx solid rgba(255, 255, 255, 0.3);
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.2);
		background: rgba(255, 255, 255, 0.2);
	}

	.edit-button {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 56rpx;
		height: 56rpx;
		background: white;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	}

	.edit-icon {
		font-size: 28rpx;
	}

	.user-name {
		font-size: 40rpx;
		font-weight: 800;
		color: white;
		margin-bottom: 8rpx;
		text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
	}

	.user-id {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 500;
	}

	/**
	 * 功能列表滚动区域
	 */
	.profile-scroll {
		flex: 1;
		width: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		height: 0;
	}

	.menu-list {
		padding: 0 24rpx;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.menu-item {
		background: white;
		border-radius: 20rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
		transition: all 0.3s ease;

		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}
	}

	.menu-icon-wrapper {
		width: 80rpx;
		height: 80rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		flex-shrink: 0;
	}

	.menu-icon {
		font-size: 40rpx;
		line-height: 1;
	}

	.menu-text {
		flex: 1;
		font-size: 30rpx;
		font-weight: 600;
		color: #1a202c;
	}

	.menu-badge {
		padding: 4rpx 12rpx;
		background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
		border-radius: 20rpx;
		font-size: 20rpx;
		color: white;
		font-weight: 700;
	}

	.menu-arrow {
		font-size: 28rpx;
		color: #94a3b8;
		font-weight: 700;
	}

	/**
	 * 底部占位
	 */
	.bottom-placeholder {
		height: 120rpx;
	}
</style>

